<template>
  <view class="card" @click="onClick">
    <view class="card-content">
      <text class="card-title">{{ title }}</text>
      <view class="card-items">
        <text class="card-item">{{ subText.workNote }}</text>
        <text class="card-item">{{ subText.planNote }}</text>
        <text class="card-item">{{ subText.otherNote }}</text>
        <text class="card-item">{{ subText.other }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    subText: {
      type: Object
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick', this.title);
    }
  }
};
</script>

<style scoped lang="scss">
/* 卡片样式 */
.card {
  margin: 10rpx;
  border-radius: 10rpx;
  background-color: #fff;
  height: 400rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  font-size: 28rpx;
  width: calc(33.33% - 20rpx);
  color: #333;
}

/* 卡片内容样式 */
.card-content {
  display: flex;
  flex-direction: column;
}

/* 卡片标题样式 */
.card-title {
  font-weight: bold;
  font-size: 40rpx;
  padding: 15rpx;
}

/* 卡片内项目容器样式 */
.card-items {
  display: flex;
  flex-direction: column;
}

/* 卡片内项目样式 */
.card-item {
  font-size: 30rpx;
  padding: 10rpx;
  color: #ccc;
}
</style>
